<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue'
import {studentUpdate, studentInfo} from "@/api/student";
import {useCommon} from '@/hooks/web/useCommon'
import {useRoute} from "vue-router";
import StudentVisit from "./component/StudentVisit.vue";
import Payment from "@/views/student-manage/component/Payment.vue";
import {usePermissions} from "@/hooks/web/usePermissions";
import AdmitForm from "@/views/student-manage/component/AdmitForm.vue";
import {useStorage} from "@/hooks/web/useStorage";

const {setStorage} = useStorage()
const {isAdmin} = usePermissions()
const route = useRoute()
let payment = ref('')
let visitData = ref([])
let {
  studentForm,
  fetchDataBox,
  getTeacher,
  optionsBox,
  gatherOptions,
  onSourceChange
} = useCommon()

let visit = ref('')
let loading = ref(false)
let payLoading = ref(false)
let formList = reactive([
  {
    label: '', xs: 24, lg: 20, md: 24, children: [
      {
        list: 'school_id',
        link: 'school_list',
        type: 'select',
        label: '报考院校',
        xs: 24,
        lg: 5,
        md: 7,
        method: () => {
          fetchDataBox('project')
        }
      },
      {
        list: 'project_id',
        link: 'project_list',
        type: 'select',
        label: '报考项目',
        xs: 24,
        lg: 5,
        md: 7,
        method: () => {
          fetchDataBox('zy')
        }
      },
      {list: 'zy_id', link: 'zy_list', type: 'select', label: '报考专业',},
      {list: 'created_time', type: 'datetime', label: '系统时间', format: 'YYYY-MM-DD HH:mm:ss',},
      {list: 'teacher_id', link: 'teacher_list', type: 'select', label: '招生老师',},
      {list: 'hezuoren', type: 'text', label: '合作人',},
      {list: '', type: '', label: '',},
      {list: '', type: '', label: '',}
    ]
  },
  {
    label: '个人信息', xs: 24, lg: 20, md: 24, children: [
      {list: 'realname', type: 'text', label: '学生姓名',},
      {list: 'sex', link: 'sex_list', type: 'select', label: '学生性别',},
      {list: 'idnum', type: 'text', label: '身份证号'},
      {list: 'email', type: 'text', label: '电子邮箱'},
      {list: 'laidian', type: 'text', label: '电话号码1'},
      {list: 'modi2', type: 'text', label: '电话号码2'},
      {list: 'weixin_name', type: 'text', label: '微信名'},
      {list: 'weixin', type: 'text', label: '微信号码'},
      {list: '', type: '', label: ''},
    ]
  },
  {
    label: '学历信息', xs: 24, lg: 20, md: 24, children: [
      {list: 'xueli', link: 'xueli_list', type: 'select', label: '当前学历'},
      {list: 'graduation', type: 'date', dateType: 'month', label: '预毕业时间', format: 'YYYY-MM'},
      {list: 'biye', type: 'text', label: '毕业学校'},
      {list: 'zhuanye', type: 'text', label: '前置专业'},
      {list: 'topik', link: 'gaokao_list', type: 'select', label: 'TOPIK成绩'},
      {list: 'certificate', link: 'certificate_list', type: 'select', label: '双证'},
      {list: 'waiyu_nengli', link: 'waiyu_nengli_list', type: 'select', label: '其他成绩',},
      {list: 'waiyu_fenshu', type: 'text', label: '分数'},
      {list: '', type: '', label: ''},
    ]
  },
  {
    label: '其他信息', xs: 24, lg: 20, md: 24, children: [
      { list: 'zhiye_leixing',link:'zhiye_list', type: 'select', label: '职业类型' },
      {
        list: 'laiyuan', link: 'laiyuan_list', type: 'select', label: '学生来源', method: () => {
          onSourceChange(studentForm.laiyuan)
        }
      },
      {list: 'laiyuan_xiangqing', type: 'text', label: '来源详情'},
      { list: 'address_arr', type: 'text', label: '地址' }
    ]
  },
  {
    label: '申报信息', xs: 24, lg: 20, md: 24, children: [
      {list: 'ruxue', link: 'ruxue_list', type: 'select', label: '入学时间'},
      {list: 'yixiang', link: 'yixiang_list', type: 'select', label: '意向类型'},
      {list: 'status_id', link: 'status_list', type: 'select', label: '当前状态'},
      {list: 'interview_time', type: 'date', dateType: 'date', label: '面试时间', format: 'YYYY-MM-DD'},
    ]
  }
])

onMounted(() => {
  if (!isAdmin) {
    formList[0].children[3].type = 'txt'
  }
  setStorage(route.query.flag, '1')
  fetchDataBox('school', '')
  getTeacher('')
  gatherOptions()
  fetchInfo()
})

let admitRef = ref('')
const fetchInfo = async () => {
  loading.value = true
  let res = await studentInfo({id: route.query.student_id})
  loading.value = false
  console.log(res);
  if (res) {
    res.data.student.student_id = route.query.student_id
    studentForm = Object.assign(studentForm, res.data.student)
    studentForm.sex_name = studentForm.sex === '1' ? '男' : '女'
    if (studentForm.idnum && !isAdmin) {
      formList[1].children[2].type = 'txt'
    }

    if (studentForm.laidian  && !isAdmin) {
      formList[1].children[3].type = 'txt'
    }
    visitData.value = res.data.visit
    //给回访信息子组件间回访时间赋值
    visit.value.visitTime.showTime = !studentForm.next_visit_time
    visit.value.visitTime.showVisitation = !studentForm.visitation_time
    admitRef.value.admitForm = Object.assign(admitRef.value.admitForm, res.data.student)
    visit.value.visitTimeForm = Object.assign(visit.value.visitTimeForm, {
      visitation_time: studentForm.visitation_time,
      next_visit_time: studentForm.next_visit_time
    })

    console.log('visitTime', visit.value.visitTime)
    //如果缴费信息有数据在赋值,确保最少一条数据
    convertPay(res)
    //循环判断是否有值,没有值原始表单展示,有值则文字形式展示
    for (const resKey in studentForm) {
      studentForm[resKey] ? studentForm[resKey + '_form'] = false : studentForm[resKey + '_form'] = true
    }

    if (res.data.student.project_id) {
      await fetchDataBox('project')
      await fetchDataBox('zy')
    }
  }
}

const convertPay = (res) => {
  payment.value.tableData.splice(0)
  if (res.data.pay.length) {
    res.data.pay.forEach(item => {
      switch (item.confirm) {
        case '1':
          item.confirm_txt = '已通过'
          break
        case '2':
          item.confirm_txt = '已驳回'
          break
        default:
          item.confirm_txt = '审批中'
      }
    })
    payment.value.tableData.push(...res.data.pay)
  } else {
    payment.value.tableData.push(
        {
          name: '报名费',
          pay_status: '',
          pay_method: '',
          pay_date: '',
          confirm: '',
          remark: '',
          fileList: [],
        },
        {
          name: '前置学费',
          pay_status: '',
          pay_method: '',
          pay_date: '',
          confirm: '',
          remark: '',
          fileList: [],
        },
    )
  }
}

const submitVisit = async () => {
  let res = await studentInfo({id: route.query.student_id})
  if (res) {
    visitData.value = res.data.visit
  }
}

const fetchPayData = async () => {
  payLoading.value = true
  let res = await studentInfo({id: route.query.student_id})
  payLoading.value = false
  if (res) {
    convertPay(res)
  }
}

/**
 * 单击文本触发
 * @param inputRef
 * @param textRef
 */
const textDblclick = (formItem) => {
  studentForm[formItem + '_form'] = true
  studentForm = Object.assign(studentForm, studentForm)
}

const studentEdit = async (value, type, txt) => {
  console.log(value);
  const data = studentForm
  data.student_id = route.query.student_id
  if (value === 'created_time') {
    data.created_change = 1
  } else if (value === 'school_id') {
    console.log(this.form.school_id)
    data.zy_id = ''
    data.project_id = ''
    studentForm.school_id_name = txt
    studentForm.school_id_form = false
    return ElMessage({message: '更换学校需重新选择报考项目才可修改!', type: 'warning'})

  } else if (value === 'project_id') {
    data.zy_id = ''
    studentForm.zy_id_name = ''
    studentForm.zy_id_form = true
    return ElMessage({message: '更换报考项目后报考专业将清空!', type: 'warning'})
  }
  loading.value = true
  const res = await studentUpdate(data)
  loading.value = false
  console.log('修改', res)
  if (res) {
    ElMessage({message: '修改成功!', type: 'success'})
    await fetchInfo()
  }
}

</script>
<template>
  <el-form style="margin-top: 30px;" label-position="left" label-width="85px" v-loading="loading">
    <el-row justify="center">
      <el-col :lg="22" :xl="19" :xs="24" :md="24" :sm="24" class="box-wrap">
        <h3 style="text-align: center;color: #303133;">学生报名信息</h3>
        <el-col :span="24" v-for="value in formList">
          <div class="student-label">{{ value.label }}</div>
          <el-row style="justify-content: space-between;">
            <el-col :lg="5" :xs="24" :md="7" :sm="24" v-for="(item,index) in value.children">
              <el-form-item
                  :key="index"
                  v-if="item.label"
                  :label="item.label"
                  :prop="item.list"
                  style="width: 100%"
              >
                <div style="width: 100%" v-show="studentForm[item.list+'_form']">
                  <el-input
                      clearable
                      v-if="item.type==='text'"
                      v-model="studentForm[item.list]"
                      type="text"
                      :placeholder="'请输入'+item.label"
                      @blur="studentEdit(item.list)"
                  />
                  <el-input
                      clearable
                      v-if="item.type==='number'"
                      v-model="studentForm[item.list]"
                      type="number"
                      :placeholder="'请输入'+item.label"
                      @blur="studentEdit(item.list)"
                  />
                  <el-radio-group v-if="item.type==='radio'" v-model="studentForm[item.list]"
                                  @change="studentEdit(item.list)">
                    <el-radio v-for="(item1,index1) in item.options" :label="item1.value">{{ item1.label }}</el-radio>
                  </el-radio-group>
                  <el-select
                      v-else-if="item.type==='select'"
                      v-model="studentForm[item.list]"
                      clearable
                      @change="item.method ? item.method(studentForm[item.list]):''"
                      :placeholder="'请选择'+item.label"
                  >
                    <el-option
                        v-for="(item2,index2) in optionsBox[item.link]"
                        @click.native="studentEdit(item.list,'itemTxt',item2.name)"
                        :key="index2"
                        :label="item2.name"
                        :value="item2.value ?item2.value :item2.id"
                    />
                  </el-select>
                  <el-date-picker
                      v-else-if="item.type==='datetime'"
                      v-model="studentForm[item.list]"
                      type="datetime"
                      style="width: 100%"
                      placeholder="选择日期时间"
                      :format="item.format"
                      :value-format="item.format"
                      @change="studentEdit(item.list)"
                  />
                  <el-date-picker
                      v-else-if="item.type==='date'"
                      v-model="studentForm[item.list]"
                      :type="item.dateType"
                      style="width: 100%"
                      placeholder="选择日期时间"
                      :format="item.format"
                      :value-format="item.format"
                      @change="studentEdit(item.list)"
                  />
                </div>
                <span style="color: red"
                      v-show="!studentForm[item.list+'_form'] && item.type !=='txt'"
                      @click="textDblclick(item.list)">
                        {{ studentForm[item.list + '_name'] || studentForm[item.list] }}
                    </span>
                <div v-show="item.type==='txt' " style="color: #545454">
                  {{ studentForm[item.list + '_name'] || studentForm[item.list] }}
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
    <student-visit :visit-data="visitData" @submitVisit="submitVisit" ref="visit"></student-visit>
  </el-form>
  <!--  录取信息-->
  <admit-form ref="admitRef"></admit-form>
  <!--  缴费组件-->
  <Payment ref="payment" @submitPayment="fetchPayData" v-loading="payLoading"></Payment>
</template>
<style scoped>
@import "index.less";
</style>
